<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo_0x01</title>
    <link rel="stylesheet" href="{% static 'web/login_register_static/style.css' %}">
</head>
<body>

<div class="container">
    <div class="login-box">
        <div class="apple-btn login-apple">
            <li class="red-btn"></li>
            <li class="yellow-btn"></li>
            <li class="green-btn"></li>
        </div>
        <div class="title">Login</div>
        <div class="input">
            <input type="text" id="login-user" placeholder="Input your username">
        </div>
        <div class="input">
            <input type="password" id="login-password" placeholder="Input your password">
        </div>
        <div class="btn login-btn">
            <span>登录</span>
        </div>
        <div class="change-box login-change">
            <div class="change-btn toSign">
                <span>去注册</span>
            </div>
        </div>
    </div>

    <div class="sign-box">
        <div class="apple-btn sign-apple">
            <li class="red-btn"></li>
            <li class="yellow-btn"></li>
            <li class="green-btn"></li>
        </div>
        <div class="title">Sign</div>
        <div class="input">
            <input type="text" id="sign-user" placeholder="Have A Good Name?">
        </div>
        <div class="input">
            <input type="password" id="sign-password" placeholder="Keep Secret">
        </div>
        <div class="btn sign-btn">
            <span>注册</span>
        </div>
        <div class="change-box sign-change">
            <div class="change-btn toLogin">
                <span>去登陆</span>
            </div>
        </div>
    </div>
</div>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    /*
Logic：
    主要采用原生 JavaScript，
    只有在发送 Ajax 请求是才使用 JQuery

===
1、登录注册页面的切换逻辑

2、Ajax发送及接受响应逻辑
===
*/


    // 封装选择器, 采用ES6箭头函数写法
    const getSelector = ele => {
        return typeof ele === "string" ? document.querySelector(ele) : "";
    }


    // 登录注册载入

    const containerShow = () => {
        var show = getSelector(".container")
        show.className += " container-show"
    }


    window.onload = containerShow;


    // 登录注册页切换
    ((window, document) => {

        // 登录 -> 注册
        let toSignBtn = getSelector(".toSign"),
            toLoginBtn = getSelector(".toLogin")
        loginBox = getSelector(".login-box"),
            signBox = getSelector(".sign-box");

        toSignBtn.onclick = () => {
            loginBox.className += ' animate_login';
            signBox.className += ' animate_sign';
        }

        toLoginBtn.onclick = () => {
            loginBox.classList.remove("animate_login");
            signBox.classList.remove("animate_sign");
        }


    })(window, document);

    // Ajax 请求发送
    const signBtn = document.querySelector(".sign-btn");
    signBtn.addEventListener("click", () => {
        // 获取注册的账号密码
        const signUsername = document.querySelector("#sign-user").value;
        const signPassword = document.querySelector("#sign-password").value;

        // 发送axios请求
        axios.post('/api/register/', {
            username: signUsername,
            password: signPassword
        })
            .then(response => {
                console.log(response.data); // 处理后端返回的数据
            })
            .catch(error => {
                console.error(error); // 处理请求错误
            });
    });

    //点击登录时，发送登录请求
    const loginBtn = document.querySelector(".login-btn");

    loginBtn.addEventListener("click", () => {
        // 获取输入框的账号和密码
        const username = document.querySelector("#login-user").value;
        const password = document.querySelector("#login-password").value;

        // 发送axios请求
        axios.post('/api/login/', {
            username: username,
            password: password
        })
            .then(response => {
                console.log(response.data); // 处理后端返回的数据
                // 如果登录成功，跳转到功能界面
                if (response.data.code === 1) {
                    alert("登录成功");
                    window.location.href = '/visualize/';

                }
                // 如果登陆失败，跳出提示框。
            })
            .catch(error => {
                console.error(error); // 处理请求错误
            });
    });

</script>
<script src="{% static 'web/login_register_static/axios.js' %}"></script>

</body>
</html>